$aside-border-color: #e4e4e4;

.system-aside {
    height: 100%;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 220px;
    background: var(--soular-aside-color);
    border-right: 1px solid var(--soular-border-color);
    .system-aside-top{
        height: 100%;
        overflow: auto;
        padding: 0;
    }
    ul,li {
        list-style: none;
    }
    .system-aside-first,.system-aside-second,.system-aside-back,.system-aside-head{
        border-left: 3px solid transparent;
    }
    .system-aside-hidden {
        display: none;
    }
    .system-aside-li-left{
        display: flex;
        align-items: center;
    }
    .system-aside-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;
        line-height: 40px;
        padding-right: 20px;
        cursor: pointer;
    }
    .system-aside-first:hover {
        background: var(--soular-select-color);
    }
    .system-aside-second{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 20px;
        .aside-second-link{
            font-size: 13px;
        }
    }
    .system-aside-second:hover{
        background: var(--soular-select-color);
    }
    .system-aside-li{
        line-height: 40px;
    }
    .system-aside-ul{
        padding: 0;
    }
    .system-aside-select{
        background: var(--soular-select-color);
        border-left: 3px solid var(--tiklab-blue);
    }

    .system-aside-head{
        padding-top: 15px;
        padding-left: 20px;
        font-size: 16px;
        font-weight: var(--tiklab-font-weight-bold);
        margin-bottom: 10px;
        &>span{
            cursor: pointer;
        }
    }

    .system-aside-back{
        border-bottom: 1px solid $aside-border-color;
        margin-bottom: 10px;
        padding-bottom: 5px;
        .aside-back-box{
            display: flex;
            align-items: center;
            height: 40px;
            line-height: 40px;
            padding-left: 20px;
            cursor: pointer;
            &:hover{
                background: var(--soular-select-color);
            }
            .aside-back-box-icon{
                font-size: 18px;
                padding-right: 8px;
            }
        }
    }
    .sys-content-icon{
        padding-right: 8px;
        font-size: 18px;
    }
}
